<template>
	<div class="p-10 flex-row h100">
		<div class="left system-page-background b-r-4">
			<div class="flex-row" style="border-bottom: 1px solid var(--el-border-color); padding: 12px 10px">
				<my-input placeholder="请输入名称" v-model="filterText" class="m-r-5" />
				<el-button type="primary" @click="insertFn" icon="Plus">新增</el-button>
			</div>
			<div class="f1 h0 m-t-10">
				<el-tree
					:data="treeList"
					:props="{
						children: 'children',
						label: 'title'
					}"
					:filter-node-method="filterNode"
					highlight-current
					node-key="id"
					ref="refTree"
					@node-click="handleNodeClick"
				>
					<template #default="{ data }">
						<div class="flex s-center w100" @contextmenu="handleContextMenu($event, data)">
							<my-icon class="m-r-5" :icon="data.type == 'M' ? 'Folder' : 'Roadmap'" />
							<span class="ellipsis f1 w0">{{ data.title }}</span>
						</div>
					</template>
				</el-tree>
			</div>
		</div>

		<div class="right system-page-background">
			<loaderModel v-bind="{ modelData }" />
		</div>

		<!-- 新增目录 -->
		<el-dialog
			:title="dialog.title"
			v-model="dialog.open"
			width="500px"
			append-to-body
			@closed="resetForm(refDialogForm)"
		>
			<my-form
				ref="refDialogForm"
				:model="dialog.form"
				label-width="90px"
				:formItem="
					dialog.title.includes('模型')
						? [
								{ prop: 'title', label: '模型名称', required: true },
								{
									prop: 'fileInfo',
									label: '模型文件',
									itemType: 'file',
									accept: '.glb,.gltf',
									fileType: ['glb', 'gltf'],
									fileSize: 1000,
									required: true
								}
							]
						: [{ prop: 'title', label: '目录名称', required: true }]
				"
			/>
			<template #footer>
				<el-button @click.prevent="dialog.open = false">取 消</el-button>
				<el-button type="primary" @click.prevent="dialogSubmitFn()">确 定</el-button>
			</template>
		</el-dialog>

		<!-- 右键 -->
		<my-contextmenu
			:show="rightMenuShow"
			:mousePosition="mousePosition"
			:data="menuOptions"
			@hide="rightMenuShow = false"
			@click="
				(item) => {
					item?.fnHandle?.();
				}
			"
		/>
	</div>
</template>

<script setup name="/threeModel">
import loaderModel from './loaderModel.vue';
import { addModel as add, editModel as edit, removeModel as remove, infoModel as info } from '@/api/threeModel';
import { treeFn, rightMenuFn } from './hooks';

/********************************************************树形数据**********************************/
const { refTree, filterText, filterNode, treeList, loadData } = treeFn(handleNodeClick);
loadData();

/************************页面数据信息******************/
const refDialogForm = shallowRef(),
	dialog = reactive({
		title: '',
		open: false,
		form: {
			id: undefined
		}
	});

// 新增
function insertFn(data = {}, title = '新增目录', type = 'M') {
	resetForm(refDialogForm.value);
	dialog.open = true;
	dialog.name = 'insert';
	nextTick(() => {
		dialog.form.parentId = data?.id ?? '0';
		dialog.title = title;
		dialog.form.id = undefined;
		dialog.form.type = type;
	});
}

// 详情
function infoFn(data) {
	return info({ id: data.id });
}

// 修改
function updateFn(data, title) {
	resetForm(refDialogForm.value);
	dialog.name = 'update';
	dialog.title = title;
	dialog.open = true;
	infoFn(data).then((res) => {
		nextTick(() => {
			dialog.form = { ...res.data };
		});
	});
}

function dialogSubmitFn() {
	refDialogForm.value.$refs.refMyForm.validate((valid) => {
		if (valid) {
			const data = { ...dialog.form, modelFileId: dialog.form.fileInfo?.[0]?.id };
			delete data.fileInfo;

			(dialog.name === 'insert' ? add : edit)?.(data).then(() => {
				msgSuccess('操作成功！');
				dialog.open = false;
				loadData();
			});
		}
	});
}

// 删除
function removeFn(data) {
	confirm('此操作将删除该条数据, 是否继续?')
		.then(() => {
			remove({ ids: data.id }).then(() => {
				msgSuccess('删除成功');
				loadData();
			});
		})
		.catch(() => {
			msgInfo('已取消删除！');
		});
}
/*******************************右键菜单************************/
const { rightMenuShow, mousePosition, menuOptions, handleContextMenu } = rightMenuFn(insertFn, updateFn, removeFn);

// 点击预览
const modelData = ref({});
function handleNodeClick(data) {
	if (data.type === 'Y') {
		infoFn(data).then(
			({
				data: {
					fileInfo: { downloadUrl, fileSize }
				}
			}) => {
				modelData.value = {
					downloadUrl,
					fileSize
				};
			}
		);
	}
}
</script>

<style lang="scss" scoped>
.left {
	height: 100%;
	width: 300px;
	overflow: auto;
	display: flex;
	flex-direction: column;
}
.right {
	margin-left: 10px;
	height: 100%;
	flex: 1;
	width: 0;
}
</style>
